<template>
  <div class="home">
    <h1>{{ msg }}</h1>
    <input type="text" v-model="msg" />
    <button @click="sayHello">点我试试</button>
    <button @click="saybyby">点我试试</button>
    <h2>{{ state.name }}</h2>
    <h2>{{ name }}</h2>
    <h2>{{ info }}</h2>
    <h2>{{ myname }}</h2>
    <h2>{{ hmsg }}</h2>
  </div>
</template>

<script>
// Hooks 编程，其本质就是在 Vue 中调用多个 函数方法，最终组合成为一个应用
import { defineComponent, reactive, ref, toRefs } from 'vue'
export default defineComponent({
  name: "home",
  data() {
    return {
      msg: "你好！"
    }
  },
  // setup 是一个最特殊的 生命周期钩子函数
  setup() {
    // 其他的所有逻辑要写在这个里面
    // data mounted methods watch ... 都在这里写
    // 在 Vue3 是没有 this 这个操作了
    const sayHello = () => {
      console.log("你好，2209！");
      state.name = "樱桃小丸子";
      myname = "犬夜叉";
      // 使用 ref 创建的对象在 模板中直接使用，但是，在 js 操作需要 .vaue 调用
      hmsg.value = "这是一个励志的故事，过年我都在敲代码！我成长了！"
    }

    // 在 Vue3 中推荐的创建一个响应式数据对象的方法
    const state = reactive({
      name: "前端老兵",
      info: "爱学习的老兵"
    })

    // 普通对象，修改只在 js 内存中，并不会触发页面变化
    // 在一些特殊场景下，mock 一个数据，我是可以不用做成响应式对象
    let myname = "蜡笔小新";

    // 我们也可以使用 ref 的 hooks 来创建一个响应式数据对象
    // 这里的 ref 的由来其实其本质是：ref 我们可以拿到 对应的 DOM 节点
    // ref 在内存中动态的创建一个类似于 input ref 得到了这个 input 所以才导致了修改 ref 
    // 响应式数据对象的时候 必须要加上 value
    const hmsg = ref("这是一个很美丽的故事！快过年了！")


    // 在 setup 里面需要把我们模板中用到的数据 return 出去才能调用
    return {
      sayHello,
      state,
      // 如果这样赋值的话，state.name 是一个普通对象，state 才是 响应式数据对象
      name: state.name,
      ...toRefs(state),
      myname,
      hmsg
    }
  },
  methods: {
    saybyby() {
      console.log("拜拜，2209！");
      // Vue3 本身可以向下兼容，但是，要注意，尽量不要混编！
      this.sayHello();
    }
  }
})
</script>

<style>

</style>